<template>
  <div class="data-box" :style="`width: ${wd}; `">
    <div class="data-box-header" :style="`background: url(${bg}) no-repeat;background-size: 100% 100%;height:${he}`">
      <div class="data-box-header-title">{{ title }}</div>
      <slot name="tab" />
    </div>
    <div class="data-box-content">
      <slot name="content" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'DafosiControlWebDataBox',

  props: {
    title: {
      type: String,
      default: '',
      required: true
    },
    wd: {
      type: String,
      default: ''
    },
    he: {
      type: String,
      default: '3.0625rem'
    },
    bg: {
      type: String
      // default: require('../../../assets/img/decisionAnalysis/data_box_header.png')
    }
  },

  data() {
    return {};
  },

  mounted() {},

  methods: {}
};
</script>

<style lang="scss" scoped>
.data-box {
  box-sizing: border-box;
  padding: 0rem 0.625rem;
  // background-color: #031835 !important;
  &-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
  }
  &-header-title {
    font-size: 1rem;
    font-weight: 700;
    margin-left: 2.5rem;
    font-style: italic;
    color: #fff;
    letter-spacing: 0.125rem;
    font-family: YouSheBiaoTiHei, YouSheBiaoTiHei-Regular;
  }
  &-content {
    color: #fff; // 默认字体
    // margin-right: 2%;
    margin-left: 1%;
  }
}
</style>
